import React, { useState } from 'react'
import { Link ,useLocation} from 'react-router-dom'
import { Wrapper } from './style'
import classnames from 'classnames'
import {isPathPartlyExisted } from '@/utils'
const Footer = () => {
    const [activeKey,setActiveKey]=useState('home')
    const {pathname}=useLocation()
    if(isPathPartlyExisted(pathname)) return(<></>);
    return (
        <Wrapper>

            <div className="footer_tabs_wrapper">
                <Link to='/home' onClick={()=>setActiveKey('home')} >
                    <div className={classnames('footer_tab_wrapper',{active:activeKey==='home'})}  >
                        <div className="footer_tab_icon">
                            <i className='iconfont icon-shouye'></i>
                        </div>
                        <div className="footer_tab_title">首页</div>
                    </div>
                </Link>

                <Link to='/community' onClick={()=>setActiveKey('community')}>
                    <div className={classnames('footer_tab_wrapper',{active:activeKey==='community'})} >
                        <div className="footer_tab_icon">
                            <i className="iconfont icon-shequ"></i>
                        </div>
                        <div className="footer_tab_title">社区</div>
                    </div>
                </Link>

                <Link to='/sport' onClick={()=>setActiveKey('sport')}>
                    <div  className={classnames('footer_tab_wrapper',{active:activeKey==='sport'})}>
                        <div className="footer_tab_icon">
                            <i className="iconfont icon-task"></i>
                        </div>
                        <div className="footer_tab_title">我的运动</div>
                    </div>
                </Link>

                <Link to='/shop' onClick={()=>setActiveKey('shop')}>
                    <div  className={classnames('footer_tab_wrapper',{active:activeKey==='shop'})}>
                        <div className="footer_tab_icon">
                            <i className="iconfont icon-shangcheng"></i>
                        </div>
                        <div className="footer_tab_title">商城</div>
                    </div>
                </Link>
                <Link to='/user' onClick={()=>setActiveKey('user')}>
                    <div  className={classnames('footer_tab_wrapper',{active:activeKey==='user'})}>
                        <div className="footer_tab_icon">
                            <i className="iconfont icon-wowowo"></i>
                        </div>
                        <div className="footer_tab_title">我</div>
                    </div>
                </Link>

            </div>
        </Wrapper>
    )
}

export default Footer
